<template>
	<view class="content1" :style="{ background: `url(${beijing}) left top/100% 100% no-repeat` }">
		<view>
			<!-- 轮播图 -->
			<view class="banner">
				<view class="uview-banner">
					<view class="postion">
						<!-- <QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar> -->
						<u-navbar title="我的赛包" :bgColor="navBgColor" :titleStyle="{ color: navColor }"
							:leftIconColor="'#FFFFFF'" fixed :autoBack="true">
						</u-navbar>
					</view>
				</view>
			</view>
			<view class="container">
				<image class="postion_img"
					:src="icon1"
					mode=""></image>
				<view class="content2" :style="{ background: `url(${beijingq}) left top/100% 100% no-repeat` }" >
					<view class="chooses flex-between" >
					</view>
					<view class="d-flex align-center flex-column" :hidden="!vueShowModel">
						<!-- <view class="destroy-code">核销码：{{ code }}</view> -->
						<view class="tip">私人专属客服微信二维码</view>
						<!-- <view class="" style="padding: 20rpx;border: #999999 2rpx dashed;"  v-if="oncode == true">
							<uQRCode ref="qrcode" canvas-id="qrcode" :value="code" size="190"></uQRCode>
						</view>
						<view class="" style="padding: 20rpx;border: #999999 2rpx dashed;"  v-if="oncode == false">
							<image style="width: 280rpx;height: 280rpx;" :src="icon0" mode=""></image>
						</view> -->
						<view class="" style="padding: 20rpx;border: #999999 2rpx dashed;">
							<!-- <image style="width: 280rpx;height: 280rpx;" :src="data.qrcode" mode=""></image> -->
							<u-album :urls="urls2"></u-album>
						</view>
						<view class="qrcode_shuax">
							<view class="" style="font-size: 28rpx;color: #ff0000;font-weight: 700;" @click="onphone()">
								客服电话:{{data.tel}}
							</view>
							<view class="" style="font-size: 24rpx;margin-top: 20rpx;width: 400rpx;color: #ff0000;">
								{{data.txt}}
							</view>
							<!-- <image :src="shuax" mode="" class="qrcode_shuax_img"></image>
							<view class="qrcode_zidong">
								<text class="qrcode_zidong1">运动码60s自动</text>
								<text class="qrcode_zidong2">刷新</text>
							</view> -->
						</view>
						<!-- <view class="qrcode_shuax">
							<image :src="shuax" mode="" class="qrcode_shuax_img"></image>
							<view class="qrcode_zidong">
								<text class="qrcode_zidong1">运动码60s自动</text>
								<text class="qrcode_zidong2">刷新</text>
							</view>
						</view> -->
					</view>
					<view class=""  style="margin-top: 30rpx;">
						<!-- <view class="tabs_1 flex-col">

							<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
								  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30" :current="currentTab" @click="onClickTab" />
						</view> -->
						<view class="busin">
							<view class="busin-title">
								<image :src="jiaopai" mode="" style="width: 170rpx;height: 49rpx;"></image>
							</view>
						</view>
						<scroll-view class="ticket_list" scroll-y="true">
							<view class="ticket_con"
								:style="{ background: `url(${beijinga}) left top/100% 100% no-repeat` }">
								<view class="ticket_con_img">
									<image class="ticket_con_image" src="https://oss.szsportscenter.cn/img/90467859caee4daf1f6682bcf7dc7902a3a36b2c.png" mode="aspectFit"></image>
									<!-- <image class="ticket_con_image" :src="data.race_img" mode=""></image> -->
								</view>
								<view class="ticket_con_conter">
									<!-- <view class="ticket_con_conter1">{{ data.race_name }}</view> -->
									<view class="" style="display: flex; justify-content: space-between; flex-direction: row;">
										<view class="ticket_con_conter1">{{ data.race_name}}</view>
										<view class="ticket_con_erwe">
											<image class="ticket_con_erweimg"
												:src="icon7"
												mode=""></image>
										</view>
									</view>
									<view class="ticket_con_conter2">{{ data.start_time }} - {{ data.end_time }}</view>
								</view>
							<!-- 	<view class="ticket_con_erwe">
									<image class="ticket_con_erweimg"
										src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/a979228c7e79cba1d89eedd34e055c5418e7207b.png"
										mode=""></image>
								</view> -->
							</view>
						
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<u-action-sheet :actions="phonelist" :closeOnClickAction="true" @close="phoneclose" :title="title"
			:show="phoneShow" @select="selectClick" :safeAreaInsetBottom="true"></u-action-sheet>
		<view v-if="Write_off"
			style="width: 100%; height: 100%;background-color:rgba(0, 0, 0, 0.6);  position: absolute;top:0;left:0;z-index: 997;">
		</view>
		<view v-if="Write_off" 
			style="width: 76%; height: 740rpx;background-image: url('https://oss.szsportscenter.cn/upload/59/2ad663afb0de8b4acf48c4ee7ebe54.png?attname=160436.png');
			background-size: 100% 100%;position: absolute;top:350rpx;left:12%;z-index: 999;">
			<scroll-view scroll-y style="width: 100%;height: 400rpx;padding: 35rpx 45rpx 35rpx 45rpx;margin-top: 220rpx;" >
				<u-parse :content="user_instruction"></u-parse>
				<view class="" style="line-height: 50rpx;color: #ffaa00;font-weight: 600;font-size: 30rpx;">
					尊敬的会员用户
				</view>
				<view class="" style="line-height: 60rpx;margin-top: 10rpx;font-size: 30rpx;">
					{{dialog_text}}
				</view>
			</scroll-view>
			<view class="" style="display: flex;justify-content: center;align-items: center;">
				<view @click="offWrite" style="width: 180rpx; height: 60rpx;background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%, #4BA677 0%);border-radius: 30rpx;
						background-size: 100% 100%;text-align: center;line-height: 60rpx;color: #fff;">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const index = require("@/api/index/index.js");
	const personal = require('@/api/personal/index.js')
	const person = require("@/api/personal/index.js");
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
	export default {
		components: {
			QSNavbar,
			uQRCode
		},
		data() {
			return {
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#ffffff',
				IconColor: '#ffffff',
				icon0: this.$https.assetsPath + '4faa1539ceb6fa26402959967e23bf3803e723ff.png',
				icon1: this.$https.assetsPath + '31ec9f2407b2a02454176c89de499e7265014a82.png',
				beijing: this.$https.assetsPath + "46c49a65f5d77b6c56d4355a7335983511a883d1.png",
				beijingq: this.$https.assetsPath + "874c8c5cfe610309300c181d858cac9ad3681c26.png",
				beijinga: this.$https.assetsPath + "940f46fda40bccb5e12978d972b45b93e4c8d3c2.png",
				shuax: this.$https.assetsPath + "7fb1b6b153dc9b9d721691a28a354e50b6d753d2.png",
				icon7: this.$https.assetsPath + 'a979228c7e79cba1d89eedd34e055c5418e7207b.png',
				jiaopai: this.$https.assetsPath + 'd36f6ab404e963a339ad5a5ec120f9687c2a595b.png',
				navbarItems_1: [{
					type: "icon",
					icon: "back",
					layout: "left",
					width: 15,
					doEvent: "back",
					iconColor: "#fff",
				}, {
					layout: "left",
					type: "text",
					text: "我的场地",
					width: 50,
					weight: "bold",
					color: "#fff",
				}, ],
				vueShowModel: true, //默认不显示
				code: '',
				tabsList: [{
						name: "凭证"
					},
					{
						name: "卡"
					}
				],
				currentTab: 0,
				list1: [],
				options: {},
				code: '',
				timer: null,
				codes: '',
				not_in_time: '',
				vueShowModel: true, //默认不显示
				chosen_id: '',
				is_over: '',
				titlename: '',
				
				data: {},
				options: {},
				code: '',
				timer: null,
				// code: 0,
				codes: '',
				not_in_time: '',
				vueShowModel: true, //默认不显示
				chosen_id: '',
				is_over: '',
				id:'',
				MyEnrolllist:{},
				goods_id:"",
				student_id:"",
				listinfo:"",
				list1: [],
				class_record_id:'',
				codes: '',
				not_in_time: '',
				vueShowModel: true, //默认不显示
				chosen_id: '',
				is_over: '',
				id:'',
				MyEnrolllist:{},
				oncode:true,
				Write_off:false,
				dialog_text:'',
				phoneShow: false,
				phonelist: [{
					name: uni.getStorageSync('tel')
				}],
				title: '拨号',
				urls2:[]
			};
		},
		onLoad(options) {
				this.id = options.id
				this.timer = null;
				uni.setNavigationBarTitle({
					title: '我的赛包'
				});
				let that = this;
				that.getMyEnrollDetail()
				// this.getChannelBanner()
				// 获取核销领券弹窗
				// this.getParamsConfig()
			},
			onShow() {
				let that = this;
				that.timer = null;
				clearInterval(that.timer);
				that.timer = setInterval(() => {
					
				}, 300000);
			},
			onUnload() {
				let that = this;
				clearInterval(that.timer);
				that.timer = null;
			},
			onHide() {
				let that = this;
				clearInterval(that.timer);
				that.timer = null;
			},
			methods: {
				selectClick() {
					uni.makePhoneCall({
						phoneNumber: uni.getStorageSync('tel')
					})
				},
				onphone() {
					this.phoneShow = true
					// uni.makePhoneCall({
					// 	phoneNumber: '156510210221'
					// })
				},
				phoneclose() {
					this.phoneShow = false
				},
				// 获取核销领券弹窗
				async getParamsConfig() {
					let that = this;
					let postData = {}
					let res = await index.getParamsConfig(postData)
					if (res.code == 1) {
						if (res.data.show_dialog == 1) {
							this.Write_off = true
							this.dialog_text = res.data.dialog_text
							this.oncode = false
						}
					}
				},
				//关闭弹窗
				offWrite() {
					this.Write_off = false
					this.oncode = true
				},
				// 获取我的待付款订单
				async getChannelBanner() {
					let postData = {
						app_id: this.$https.weixinAppId,
						project_id: getApp().globalData.projectId,
					};
					let res = await person.getChannelBanner(postData);
					if (res.code == 1) {
						this.list1 = res.data.result.channel_banner_code
					} 
				},
				// 点击按钮打开弹框
				vueToMdel() {
					this.vueShowModel = false;
				},
				// 点击蒙版按钮模态框消失
				setting() {
					this.vueShowModel = true;
				},
				// 点击取消按钮模态框消失
				cancel() {
					this.vueShowModel = true;
				},
				// 点击确定按钮模态框消失
				confirm() {
					this.vueShowModel = true;
				},
		
				dengguan() {
					if (this.not_in_time == 1) {
						// uni.showModal({
						// 	// title: data[1],
						// 	content: '当前时间不在订单时间范围',
						// 	showCancel: false,
						// 	success: function(res) {
						// 		if (res.confirm) {
						// 		} else if (res.cancel) {
						// 		}
						// 	}
						// });
						this.vueShowModel = false;
					}
				},
		
				onClickMenulist() {
					if (this.options.field_type != '2') {
						uni.navigateTo({
							url: '../../../page_venues/pages/venuesDetail/sharedBy/sharedBy?id=' + this.options.id +
								"&court_no=" + this.codes +
								"&beShare=" + this.options.beShare
						})
						var that = this;
						clearInterval(that.timer);
						that.timer = null;
					} else {
						uni.showToast({
							title: '您暂无分享权利。',
							icon: 'error',
							duration: 1500
						});
					}
				},
				onClickMenu(item, index) {
					if (index == 0) {
						uni.navigateTo({
							url: '../../../page_venues/pages/venuesDetail/sharedBy/sharedBy?id=' + this.options.id +
								"&court_no=" + this.codes +
								"&beShare=" + this.options.beShare
						})
						var that = this;
						clearInterval(that.timer);
						that.timer = null;
					} else if (index == 1) {
						var that = this;
						clearInterval(that.timer);
						that.timer = null;
						uni.navigateTo({
							url: '/pages_other/overtime/index'
						})
					}
				},
				getdata() {
					var that = this;
					if (uni.$u.pages()[uni.$u.pages().length - 1].route == 'pages/personal/qrcode/qrcode') {} else {
						clearInterval(that.timer);
						that.timer = null;
					}
				},
				// 获取我的赛包
				async getMyEnrollDetail() {
					let postData = {
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						id: this.id
					}
					let res = await person.getMyEnrollDetail(postData)
					if (res.code === 1) {
						this.data = res.data.data
						this.code = res.data.data.race_no
						uni.setStorageSync("tel", res.data.data.tel);
						this.urls2 = [
							this.data.qrcode
						]
					}
				},
				async getDynamiclist() {
					let params = {
						goods_type: '1',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						goods_id: this.data.id
					}
					let res = await person.getDynamicCode(params)
					if (res.code === 1) {
						this.code = res.data.result.code
					}
				},
		
			
				// 获取我的场地详情
				async getMyCourtDetail() {
					let param_s = {
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						open_id: uni.getStorageSync("openid"),
						ticketno: this.options.court_no,
						sender: this.options.sender,
						product_id: this.options.product_id
					}
					let res = await person.getMyCourtDetail(param_s)
					if (res.code === 1) {
						this.data = res.data.ticketData
						this.code = res.data.ticketData.court_no
						this.codes = res.data.ticketData.court_no
						this.chosen_id = res.data.ticketData.id
						this.is_over = res.data.ticketData.is_over
						uni.setNavigationBarTitle({
							title: this.data.venue_name
						});
		
						let items = JSON.stringify(res.data.ticketData);
						uni.setStorageSync("wqzdy", items);
		
						var datas = uni.getStorageSync("wqzdy");
						var itemss = JSON.parse(datas)
						this.getDynamicCodes()
					}
				},
				async getDynamicCodes() {
					let params = {
						goods_type: '3',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						goods_id: this.data.id,
						beshared: this.options.beShare,
						code: this.codes,
						open_id: uni.getStorageSync("openid"),
						choose_id: this.data.id
					}
					let res = await person.getDynamicCode(params)
					if (res.code === 1) {
						this.code = res.data.result.code
						this.not_in_time = res.data.result.not_in_time
						
					}
				},
				chaoshi() {
					if (this.is_over == 1) {
						uni.navigateTo({
							url: '/pages_a/overtime/overtime?court_id=' + this.options.court_id +
								"&chosen_id=" + this.chosen_id
						})
					} else {
						uni.showModal({
							// title: data[1],
							content: '您没有超时账单，请尽快离场。',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
								} else if (res.cancel) {
								}
							}
						});
					}
				},
		
				backToList() {
					uni.navigateBack({
						delta: 1
					})
				},
				fenxiang() {
					uni.navigateTo({
						url: '../../../page_venues/pages/venuesDetail/sharedBy/sharedBy?id=' + this.options.id +
							"&court_no=" + this.code
					})
					var that = this;
					clearInterval(that.timer);
					that.timer = null;
		
				},
				wwww() {
					var that = this;
					clearInterval(that.timer);
					that.timer = null;
					uni.navigateTo({
						url: '/pages_other/overtime/index'
					})
				},
			}
		}
</script>

<style lang="scss" scoped>
	// @import url("@/static/css/index/index.css");
	.content1 {
		display: flex;
		flex-direction: column;
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10vh;
		flex-direction: column;

		.postion_img {
			display: flex;
			justify-content: center;
			width: 80%;
			height: 96rpx;
		}

		.content2 {
			display: flex;
			flex-direction: column;
			background-size: 100% 100%;
			width: 86vw;
			height: 81vh;

			.chooses {
				// background-color: #EDF5F5;
				// padding: 75rpx 30rpx 80rpx 31rpx;
				margin-left: 15rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;
				height: 50rpx;

				.my-menu {
					// position: absolute;
					// top: 240rpx;
					// left: 5%;
					// transform: translate(-50%);
				}

				.cates_s {
					display: flex;
					justify-content: center;
					flex-direction: row;
				}

				.cates {
					display: flex;
					justify-content: center;
					// position: absolute;
					// top: 50%;
					// left: 22rpx;
					// transform: translateY(-50%);
				}

				.catess {
					display: flex;
					justify-content: center;
					// position: absolute;
					// top: 50%;
					// left: 210rpx;
					// transform: translateY(-50%);
				}

				.catesss {
					display: flex;
					justify-content: center;
					// position: absolute;
					// top: 50%;
					// left: 390rpx;
					// transform: translateY(-50%);
				}

				.cate-item {
					width: 200rpx;
					font-size: 24rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.cate-item text {
					margin-top: 10rpx;
				}

			}

			.tabs_1 {
				width: 86vw;
				height: 110rpx;
				margin-top: 40rpx;

				/deep/.u-tabs {
					// background-color: #fff;

					.u-tabs__wrapper__nav__item {
						flex: 1;
					}

					.u-tabs__wrapper__nav__line {
						bottom: 0;
					}
				}
			}

			.ticket_list {
				width: 100vw;
				height: 28vh;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;

				.ticket_con {
					background-size: 100% 100%;
					width: 570rpx;
					height: 180rpx;
					display: flex;
					flex-direction: row;
					margin-left: 5vw;
					margin-top: 20rpx;
					position: relative;

					.ticket_con_img {
						margin-left: 20rpx;
						margin-top: 20rpx;

						.ticket_con_image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.ticket_con_conter {
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						margin-left: 20rpx;
						margin-top: 20rpx;

						.ticket_con_conter1 {
							font-size: 30rpx;
							color: #333333;
							font-weight: 700;
							width: 380rpx;
						}

						.ticket_con_conter2 {
							font-size: 26rpx;
							color: #333333;
						}

						.ticket_con_conter3 {
							font-size: 26rpx;
							color: #333333;
						}

						.ticket_con_conter4 {
							font-size: 26rpx;
							color: #333333;
						}
					}

					.ticket_con_erwe {
						display: flex;
						justify-content: flex-end;
						position: absolute;
						right: 3vw;
						top: 3vw;

						.ticket_con_erweimg {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}




			.busin {
				display: flex;
				align-items: center;
				margin-left: 26rpx;
				margin-top: 30rpx;

				.busin-title {
					color: rgb(51, 51, 51);
					font-size: 32rpx;
					font-weight: 700;
					line-height: 31rpx;
					white-space: nowrap;
				}

			}


			.qrcode_shuax {
				display: flex;
				flex-direction: column;  ;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				.qrcode_shuax_img {
					width: 24rpx;
					height: 24rpx;
				}

				.qrcode_zidong {
					font-size: 22rpx;

					.qrcode_zidong1 {
						color: #666666;
					}

					.qrcode_zidong2 {
						color: #4BA677;
					}
				}
			}

			.destroy-code {
				color: #4BA677;
				// margin: 40rpx 0;
				margin: 30rpx 0 20rpx 0;
			}

			.tip {
				margin: 30rpx 0 20rpx 0;
				color: #ff0000;
				font-size: 30rpx;
				font-weight: 700;
			}

			.tips {
				margin-top: 20rpx;
				color: #999;
				font-size: 28rpx;
			}
		}


	}
</style>